<template>
  <div class="tech-background">
    <div
      ref="container"
      class="container">
      <div
        class="node"
        v-for="wave in waves"
        :key="wave.id"
        :class="wave.className"
        :style="wave.style"></div>
    </div>
    <div class="grid-lines"></div>
  </div>
</template>

<script lang="ts" setup name="TechBackground">
import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
interface PointWaveNode {
  id: number
  className: string
  style: {
    left: string
    top: string
    width: string
    height: string
    animationDelay: string
  }
}
interface LineWaveNode {
  id: number
  className: string
  style: {
    width: string
    left: string
    top: string
    transform: string
    background: string
    animationDuration: string
  }
}

const container = ref(null)
const pointWaves = reactive<PointWaveNode[]>([])
const lineWaves = reactive<LineWaveNode[]>([])
const waves = computed(() => [...pointWaves, ...lineWaves])

let waveInterval: ReturnType<typeof setInterval> | null = null
let nodeInterval: ReturnType<typeof setInterval> | null = null
const colors = [
  'rgba(100, 255, 218, 0.7)', // 蓝绿色
  'rgba(79, 195, 247, 0.7)', // 亮蓝色
  'rgba(68, 138, 255, 0.7)', // 中蓝色
  'rgba(41, 98, 255, 0.7)', // 深蓝色
]

// 创建线条波纹
const createLineWave = () => {
  // 随机长度
  const length = Math.random() * 300 + 100

  // 随机位置和角度
  const x = Math.random() * window.innerWidth
  const y = Math.random() * window.innerHeight
  const angle = Math.random() * 360

  // 随机颜色
  const color = colors[Math.floor(Math.random() * colors.length)]

  // 随机动画持续时间
  const duration = Math.random() * 3 + 2

  const id = new Date().getTime()
  lineWaves.push({
    id,
    className: 'line-wave',
    style: {
      width: `${length}px`,
      left: `${x}px`,
      top: `${y}px`,
      transform: `rotate(${angle}deg)`,
      background: `linear-gradient(90deg, transparent, ${color}, transparent)`,
      animationDuration: `${duration}s`,
    },
  })

  // 动画结束后移除元素
  setTimeout(() => {
    const index = lineWaves.findIndex(wave => wave.id === id)
    lineWaves.splice(index, 1)
  }, duration * 1000)
}

// 创建随机节点
const createNode = () => {
  const x = Math.random() * window.innerWidth
  const y = Math.random() * window.innerHeight
  const delay = Math.random() * 2
  const size = Math.random() * 3 + 2
  const id = new Date().getTime()
  pointWaves.push({
    id,
    className: 'point-wave',
    style: {
      left: `${x}px`,
      top: `${y}px`,
      width: `${size}px`,
      height: `${size}px`,
      animationDelay: `${delay}s`,
    },
  })
  // 随机时间后移除
  setTimeout(() => {
    const index = pointWaves.findIndex(wave => wave.id === id)
    pointWaves.splice(index, 1)
  }, 10000 + Math.random() * 5000)
}

// 初始化背景元素
const initBackground = () => {
  pointWaves.length = 0
  lineWaves.length = 0
  // 初始创建波纹和节点
  for (let i = 0; i < 20; i++) {
    createLineWave()
  }

  for (let i = 0; i < 30; i++) {
    createNode()
  }

  // 设置定时器
  waveInterval = setInterval(createLineWave, 800)
  nodeInterval = setInterval(createNode, 1200)
}

// 清理背景元素
const cleanupBackground = () => {
  if (waveInterval) clearInterval(waveInterval)
  if (nodeInterval) clearInterval(nodeInterval)
}

// 窗口大小变化时重新调整
const handleResize = () => {
  cleanupBackground()
  initBackground()
}

onMounted(() => {
  initBackground()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  cleanupBackground()
  window.removeEventListener('resize', handleResize)
})
</script>

<style lang="scss" scoped>
.tech-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: #0a192f;
}

.line-wave {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(100, 255, 218, 0.7), transparent);
  transform-origin: left center;
  pointer-events: none;
  animation: lineWave linear infinite;
  filter: drop-shadow(0 0 2px rgba(100, 255, 218, 0.5));
}

@keyframes lineWave {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.7;
  }
  90% {
    opacity: 0.7;
  }
  100% {
    transform: scaleX(1);
    opacity: 0;
  }
}

/* 科技感网格背景 */
.grid-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(64, 128, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(64, 128, 255, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* 添加一些随机节点 */
.point-wave {
  position: absolute;
  width: 3px;
  height: 3px;
  background-color: rgba(100, 255, 218, 0.8);
  border-radius: 50%;
  pointer-events: none;
  animation: nodePulse 2s ease-in-out infinite alternate;
}

@keyframes nodePulse {
  0% {
    transform: scale(1);
    opacity: 0.3;
  }
  100% {
    transform: scale(1.5);
    opacity: 0.8;
  }
}
</style>
